<style lang="less">
</style>

<template>
    <div class="user-list-view">
        <Card>
            <span slot="title">角色列表</span>
            <span slot="extra">
                <a href="#" @click.prevent="getData">
                    <Icon type="loop"></Icon>
                    刷新
                </a>
            </span>
            <Row>
                <Col>
                <Table border height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
            <Row style="padding: 5px 0">
                <Col>
                    <Page ref="Page"
                      :total="page.total"
                      :size="page.size"
                      @on-change="handleChangePage"
                      @on-page-size-change="handleChangePageSize"
                      :page-size-opts="page.sizes" show-sizer show-elevator></Page>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';

    const viewButton = (vm, h, row, index) => {
        return h('a', {
                style: {
                    margin: '5px',
                },
                on: {
                    'click': (event) => {
                        vm.show(row)
                    }
                }
            }, '查看'
        );
    };

    export default {
        data () {
            return {
                self: this,
                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                    sizes: [10, 30, 50, 100],
                },
                columns: [
                    {
                        title: '编号',
                        key: 'id',
                    },
                    {
                        title: '标识',
                        key: 'name'
                    },
                    {
                        title: '名称',
                        key: 'display_name'
                    },
                    {
                        title: '简介',
                        key: 'description'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data: [

                ]
            }
        },

        mounted () {
            this.getData();
        },

        created () {
            this.init();
        },

        methods: {
            init () {
                let vm = this;

                this.columns.forEach(item => {
                    if (item.key == 'action') {
                        item.render = (h, param) => {
                            return [
                                viewButton(vm, h, param.row, param.index),
                            ]
                        }
                    }
                });
            },

            getData () {
                this.$Message.loading('数据加载中...');
                util.api().get(`/admin/api/roles?page=${this.page.current}`).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                        this.page.total = resp.data.meta.total;
                        this.page.current = resp.data.meta.current_page;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '获取角色列表信息失败')
                });
            },

            handleChangePage (page) {
                this.page.current = page;
                this.getData();
            },

            handleChangePageSize (size) {
                this.page.size = size;
                this.getData();
            },

            show (row) {
                this.$Modal.info({
                    title: '角色信息',
                    content: `编号：${row.id}<br>标识：${row.name}<br>名称：${row.display_name}<br>简介：${row.description}<br>添加时间：${row.created_at}<br>更新时间：${row.updated_at}`
                });
            }
        }
    };
</script>
